<template>
  <div class="goods-add">
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1" description="基本信息"></el-step>
      <el-step title="步骤 2" description="商品图片"></el-step>
      <el-step title="步骤 3" description="商品内容"></el-step>
    </el-steps>
    <!-- 标签页 -->
    <el-tabs tab-position="left" v-model='tabAtive' @tab-click="handleClick">
      <el-tab-pane name='0' label="基本信息">
        <!-- 表单 -->
        <el-form label-position="right" label-width="80px" :model="form">
          <el-form-item label="商品名称">
            <el-input v-model="form.goods_name" placeholder='请输入商品名称'></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="form.goods_price" placeholder='请输入商品价格'></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input v-model="form.goods_weight" placeholder='请输入商品重量'></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="form.goods_number" placeholder='请输入商品数量 '></el-input>
          </el-form-item>
          <el-form-item label="商品分类" >
            <!-- 级联选择器 -->
            <div class="block">
              <el-cascader v-model="form.goods_cat" :props='props' :options="options"></el-cascader>
            </div>
          </el-form-item>
          <el-button type='primary' @click='nextStep'>下一步</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name='1' label="商品图片">
        <el-upload action="http://localhost:8888/api/private/v1/upload" :headers='headers' name='file' :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" :on-success='handleSuccess'>
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <el-button type='primary' @click='nextStep'>下一步</el-button>
      </el-tab-pane>
      <el-tab-pane name='2' label="商品内容">
        <quill-editor v-model="form.goods_introduce" ></quill-editor>
        <!-- ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" -->
        <el-button type='primary' @click="addGood">添加</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: [],
        pics: [],
        goods_introduce: ''
      },
      active: 0,
      tabAtive: 0,
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      options: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  methods: {
    async getGoodsList () {
      const { meta, data } = await this.$axios.get('categories', {
        params: {
          type: 3
        }
      })
      if (meta.status === 200) {
        console.log(data)
        this.options = data
        // console.log(this.options)s
      } else {
        console.log(meta.msg)
      }
    },
    handleRemove (file, fileList) {
      this.form.pics = this.form.pics.filter(item => item.pic !== file.response.data.tmp_path)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleSuccess (response, file, fileList) {
      const { meta, data } = response
      if (meta.status === 200) {
        this.form.pics.push({ pic: data.tmp_path })
      } else {
        console.log(meta.msg)
      }
    },
    handleClick (tab) {
      this.active = +tab.index
    },
    nextStep () {
      this.active++
      this.tabAtive = this.active + ''
    },
    // 添加商品
    async addGood () {
      console.log(this.form.goods_cat)
      this.form.goods_cat = this.form.goods_cat.join(',')
      const { meta } = await this.$axios.post('goods', { ...this.form })
      console.log(await this.$axios.post('goods', { ...this.form }))
      if (meta.status === 201) {
        this.$message.success('添加成功')
        this.$router.push('/goods')
      } else {
        this.$message.error(meta.msg)
      }
    }
  },
  computed: {
    headers () {
      return {
        'Authorization': localStorage.getItem('token') // 直接从本地获取token就行
      }
    }
  },
  created () {
    this.getGoodsList()
  }
}
</script>

<style lang='scss' scoped>
.quill-editor {
  background-color: #fff;
   /deep/ .ql-editor {
    height: 300px ;
  }
}
</style>
